<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>备忘录示例</title>
    <link rel="stylesheet" href="css/all.css">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    <script src="js/esl.js"></script>
</head>
<body>
    <h1>备忘录示例</h1>
    <p>本示例展示如何使用<code>router</code>组件，完成一个简单的<em>标签页切换</em>功能。</p>
    <h2>示例</h2>
    <div id="example">
        <ul id="list">
        </ul>
        <div id="command">
            <div id="add-memo">
                <input id="content" /><span id="submit">添加条目</span>
            </div>
            <div id="change-color">
                <span>更换背景：</span>
                <a id="color-red" href="#config~color=red">红色</a>
                <a id="color-green" href="#config~color=green">绿色</a>
                <a id="color-blue" href="#config~color=blue">蓝色</a>
            </div>
        </div>
    </div>
    <script>
        require.config({
            'packages': [
                {
                    'name': 'er',
                    'location': '../src',
                    'main': 'main'
                },
                {
                    'name': 'eoo',
                    'location': '../dep/eoo/src',
                    'main': 'main'
                },
                {
                    'name': 'etpl',
                    'location': '../dep/etpl/src',
                    'main': 'main'
                },
                {
                    'name': 'mini-event',
                    'location': '../dep/mini-event/src',
                    'main': 'main'
                },
                {
                    'name': 'emc',
                    'location': '../dep/emc/1.0.0/src',
                    'main': 'main'
                },
                {
                    'name': 'promise',
                    'location': '../dep/promise/1.0.0/src',
                    'main': 'main'
                },
                {
                    'name': 'underscore',
                    'location': '../dep/underscore/src',
                    'main': 'underscore'
                }
            ],
            'paths': {}
        });
        require(
            ['er/router', 'er/locator', 'er/util', 'er/URL'],
            function(router, locator,util, URL) {
                function addEntry(content) {
                    var id = util.guid();
                    var html = [
                        '<li data-id="' + id + '">',
                            '<span>' + util.encodeHTML(content) + '</span>',
                            '<a href="#complete~id=' + id + '">设置完成</a>',
                            '<a href="#remove~id=' + id + '">删除</a>',
                        '</li>'
                    ];
                    $('#list').append(html.join(''));
                }

                var routes = {
                    add: function(url) {
                        var content = url.getQuery('content');
                        addEntry(content);
                    },
                    config: function(url) {
                        var color = url.getQuery('color');
                        $('#list').css('background-color', color);
                    },
                    complete: function(url) {
                        var id = url.getQuery('id');
                        $('#list li[data-id="' + id + '"]').addClass('complete');
                    },
                    remove: function(url) {
                        var id = url.getQuery('id');
                        $('#list li[data-id="' + id + '"]').remove();
                    }
                };

                for (var key in routes) {
                    router.add(key, routes[key]);
                }
                function taunt(url) {
                    if (url.getPath() && url.getPath() !== '/') {
                        alert('Who\'s your daddy?');
                    }
                }
                router.setBackup(taunt);

                $('#submit').on(
                    'click',
                    function() {
                        var url = URL.withQuery(
                            'add',
                            { content: $('#content').val() }
                        );
                        locator.redirect(url);
                    }
                );

                addEntry('回家路上打酱油');
                addEntry('晚上10点一定要睡觉！');

                router.start();
                locator.start();
            }
        );
    </script>
</body>
</html>
